<template>
  <a-popover arrow-class="draggable-box-arrow" content-class="draggable-box-content" position="left">
    <div
      v-show="isShow"
      class="draggable-box"
      :style="{ top: posY + 'px', left: posX + 'px', width: width + 'px', height: height + 'px' }"
      @mousedown="startDrag"
      @touchstart.prevent="startDragTouch"
    >
      <slot></slot>
    </div>
    <template #content>
      <div class="operation">
        <a-tag style="display: block; cursor: pointer" @click="handleChooseKeyword" color="blue">关联关键词</a-tag>
        <a-tag style="display: block; cursor: pointer; margin-top: 8px" @click="handleInputKeyword" color="blue"
          >输入关键词</a-tag
        >
      </div>
    </template>
  </a-popover>
</template>

<script>
export default {
  data() {
    return {
      isDragging: false,
      posX: 0,
      posY: 0,
      startX: 0,
      startY: 0,
      maxX: 0, // 最大X轴拖动距离
      maxY: 0, // 最大Y轴拖动距离
      isShow: false,
      startDate: null,
      endDate: null
    }
  },
  emits: ['handleClick', 'handleChooseKeyword', 'handleInputKeyword'],
  props: {
    width: {
      type: Number,
      default: 300
    },
    height: {
      type: Number,
      default: 300
    },
    initBottom: {
      type: Number,
      default: 150
    },
    initRight: {
      type: Number,
      default: 76
    },
    parentRef: {
      type: Object,
      default: {}
    }
  },
  mounted() {
    this.maxX = this.$props.parentRef?.offsetWidth - this.$props.width
    this.maxY = this.$props.parentRef?.offsetHeight - this.$props.width
    this.posX = this.$props.parentRef?.offsetWidth - 100
    this.posY = this.$props.parentRef?.offsetHeight - 100
    this.$nextTick(() => {
      this.isShow = true
    })
  },
  methods: {
    startDrag(event) {
      this.startDate = new Date().getTime()
      event.preventDefault()
      event.stopPropagation() // 阻止事件传播
      this.isDragging = true
      this.startX = event.clientX
      this.startY = event.clientY
      document.addEventListener('mousemove', this.drag)
      document.addEventListener('mouseup', this.stopDrag)
    },
    drag(event) {
      if (this.isDragging) {
        let deltaX = event.clientX - this.startX
        let deltaY = event.clientY - this.startY
        let newX = this.posX + deltaX
        let newY = this.posY + deltaY

        // 限制在容器内部移动
        if (newX < 0) {
          newX = 0
        } else if (newX > this.maxX) {
          newX = this.maxX
        }

        if (newY < 0) {
          newY = 0
        } else if (newY > this.maxY) {
          newY = this.maxY
        }

        this.posX = newX
        this.posY = newY

        this.startX = event.clientX
        this.startY = event.clientY
      }
    },
    stopDrag() {
      this.endDate = new Date().getTime()
      let time = this.endDate - this.startDate
      if (time < 300) {
        this.$emit('handleClick')
      }
      this.isDragging = false
      document.removeEventListener('mousemove', this.drag)
      document.removeEventListener('mouseup', this.stopDrag)
    },
    startDragTouch(event) {
      this.startDate = new Date().getTime()
      event.preventDefault()
      event.stopPropagation() // 阻止事件传播
      this.isDragging = true
      this.startX = event.touches[0].clientX
      this.startY = event.touches[0].clientY
      document.addEventListener('touchmove', this.dragTouch, {
        passive: false
      })
      document.addEventListener('touchend', this.stopDragTouch)
    },
    dragTouch(event) {
      if (this.isDragging) {
        let deltaX = event.touches[0].clientX - this.startX
        let deltaY = event.touches[0].clientY - this.startY
        let newX = this.posX + deltaX
        let newY = this.posY + deltaY

        // 限制在容器内部移动
        if (newX < 0) {
          newX = 0
        } else if (newX > this.maxX) {
          newX = this.maxX
        }

        if (newY < 0) {
          newY = 0
        } else if (newY > this.maxY) {
          newY = this.maxY
        }

        this.posX = newX
        this.posY = newY

        this.startX = event.touches[0].clientX
        this.startY = event.touches[0].clientY
      }
    },
    stopDragTouch() {
      this.endDate = new Date().getTime()
      let time = this.endDate - this.startDate
      if (time < 300) {
        this.$emit('handleClick')
      }
      this.isDragging = false
      document.removeEventListener('touchmove', this.dragTouch)
      document.removeEventListener('touchend', this.stopDragTouch)
    },
    handleChooseKeyword() {
      this.$emit('handleChooseKeyword')
    },
    handleInputKeyword() {
      this.$emit('handleInputKeyword')
    }
  }
}
</script>

<style lang="scss" scoped>
.draggable-box {
  position: absolute;
  bottom: 27px;
  right: 16px;
  cursor: move;
  z-index: 9;
  // &:hover {
  //   .operation {
  //     display: block;
  //   }
  // }
}
</style>
<style lang="scss">
.draggable-box-content {
  background: transparent;
  box-shadow: none;
  border: none;
  padding: 0;
  margin: 0;
}
.draggable-box-arrow {
  display: none;
}
</style>
